<template>
    <div class="withdrawal">
        <div class="money-main">
            <div class="money-top">
                <div>可提现金额:</div>
                <div class="money-price">¥{{user.balance}}</div>
            </div>
            <div class="money-bottom">
                <div style="position: relative;top:2px">提现金额：</div>
                <input type="text" v-model="money" placeholder="请输入要提取的金额">
            </div>
        </div>
        <div class="notice-main">
            <div class="money-detail" @click="toDetail">提现明细</div>
            <div class="money-notice">最低提现10元</div>
        </div>

        <div class="withdrawal-type">
            <div class="withdrawal-type-title">提现方式</div>

            <div class="withdrawal-type-head">
                <img class="withdrawal-type-pic" src="../image/icon-type-right.png">
                <div class="withdrawal-type-name">银行卡</div>
            </div>

            <div class="input-list">
                <div class="input-name">真实姓名：</div>
                <input type="text" v-model="bank_name" placeholder="请输入真实姓名"></input>
            </div>

            <div class="input-list">
                <div class="input-name">开户行：</div>
                <input type="text" v-model="bank_account" placeholder="请输入开户行名称/地址"></input>
            </div>

            <div class="input-list">
                <div class="input-name">银行卡：</div>
                <input type="text" v-model="bank_card" placeholder="请输入提现银行卡号"></input>
            </div>

        </div>

        <div class="money-btn" @click="sumbit">提交申请</div>
    </div>
</template>
<script lang="ts">
    // @ is an alias to /src
    import {Component} from "vue-property-decorator";
    import Sence from "../sence/Sence";

    @Component({
        components: {},
    })

    export default class Withdrawal extends Sence {
        public money: any = ''; // 提现金额
        public bank_name: string = '';// 真实姓名
        public bank_account: string = '';// 开户行
        public bank_card:any=''; // 银行卡号
        public user: any = {}; // 用户数据
        public toDetail(): void {
            this.$router.push('/withdetail');
        }
        public load:boolean=true; // 提现锁

        /**
         * 页面初始加载
         */
        public mounted(): void {
            this.getUser();
        }

        /**
         * 获取用户信息
         */
        public getUser(): void {
            this.freshUser().then((res: any) => {
                this.user = res;
                this.bank_card=res.bank_card;
                this.bank_name=res.real_name
            });
        }

        /**
         * 提交申请
         */
        sumbit():void{
            if(this.load){
                this.load=false;
                let value={
                    money:this.money,
                    bank_card:this.bank_card,
                    bank_name:this.bank_name,
                    bank_account:this.bank_account,
                    pay_type:30
                };
                this.post('api/user.withdraw/submit',{
                    data:JSON.stringify(value)
                }).then((res:any)=>{
                    this.toast('提现申请成功！');
                    this.load=true;
                    setTimeout(()=>{
                        this.$router.push('/withdetail')
                    },1500)
                })
            }
        }
    }
</script>

<style scoped lang="stylus">
    input {
        outline: none
        border: 0
        padding 8px
        border 1px solid #f2f2f2
        border-radius 5px
        margin-left 8px
        width 50vw
    }

    .money-main
        box-shadow 0 0 10px #ccc
        margin 20px 20px 0 20px
        border-radius 5px

    .money-top
        display flex
        flex-direction row
        align-items center
        justify-content space-between
        padding 12px
        border-bottom 1px solid #f2f2f2

    .money-bottom
        display flex
        flex-direction row
        align-items center
        padding 12px

    .notice-main
        display flex
        flex-direction row
        justify-content space-between
        align-items center
        margin 20px

    .money-detail
        font-size 12px
        color #786cff

    .money-notice
        text-align right
        font-size 12px
        color #808080

    .money-btn
        margin auto
        width 120px
        border-radius 5px
        padding 10px 0
        text-align center
        background #786cff
        color white

    .money-price
        font-size 17px
        color #786cff

    .withdrawal-type
        box-shadow 0 0 10px #ccc
        margin 20px
        border-radius 5px
        padding-bottom 10px

    .withdrawal-type-title
        padding 12px
        border-bottom 1px solid #f2f2f2

    .withdrawal-type-head
        padding 12px
        display flex
        flex-direction row
        align-items center

    .withdrawal-type-pic
        width 23px
        height 23px

    .input-list
        display flex
        flex-direction row
        align-items center
        margin-bottom 10px

    .input-name
        width 23vw
        text-align right


    .withdrawal-type-name
        margin-left 5px


</style>
